{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>

  .container-fluid {
    background-color: #ffffff;
  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: rgba(10, 10, 10, .4);
    opacity: 1.0;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 3px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid">
  <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/banner/bannerrz.png" >

  <div class="mx-auto" style="background: #952627;margin-top: -10px;padding-bottom: 30px">
    <div style="text-align: center;display:flex;align-items:center;justify-content:center;padding: 30px 15px;">
      <img alt="" id="no1" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_03.png" style="width: 30%;">

      <img alt="" id="no2" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_01.png" style="width: 30%;margin: 0 10px">

      <img alt="" id="no3" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_02.png" style="width: 30%;">
    </div>
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/4z.jpg" >
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="margin-top: -40px;width: 45%"  src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_zk.png">
  </div>

  <div class="mx-auto" style="background: #952627;padding-bottom: 30px">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/sofa.png">
          </div>
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/tea table.png">
          </div>
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/chair.png">
          </div>
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/bed.png">
          </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <img alt="" style="width: 95%;margin-top: 10px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/76z.png" >
    <video width="100%" id="video" poster="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/shiping.png" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/618.mp4" style="height:70%;margin: 10px 0 0;display:block;"></video>
    <img alt="" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/ybpic.png" >
  </div>

  <img alt="" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/banner_01.png" >

  <div class="mx-auto" id="link1" style="background: #952627">
    <img alt="" style="margin-top: 10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/rz/rz1.jpg">
    <img alt="" style="margin-top: 10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/rz/rz2.jpg">
    <img alt="" style="margin-top: 10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/rz/rz3.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="margin-top: -50px;margin-bottom: 30px;width: 45%"  src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_rz.png">
  </div>

  <div class="mx-auto" id="link2" style="background: #FDEEE3;padding-bottom: 10px;margin-top: -10px">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/zz/zz1.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/zz/zz2.jpg">
    <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/zz/zz3.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="margin-top: -50px;margin-bottom: 30px;width: 45%"  src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_zz.png">
  </div>

  <div class="mx-auto" id="link3" style="background: #ECC0A9;margin-top: -5px;">
    <img alt="" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/gz/gz1.jpg">
    <img alt="" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/gz/gz2.jpg">
    <img alt="" style="margin-top: -10px;" src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/gz/gz3.jpg">
    <img alt="" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')" style="margin-top: -35px;margin-bottom: 30px;width: 45%"  src="https://res.bestyoujia.com/web/ZMYJ/activities/act618/mobile/button_gz.png">
  </div>

  <div style="margin: 25px;color: #333333;font-size: 12px;text-align: center;">
    *以上礼品以实物为准，活动详情咨询工作人员<br>
    以上活动解释权归致美优家所有
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    initWxShare('618家装狂欢趴', '抢4折优品，25重整装礼');

    const video = document.querySelector('#video');

    video.onclick = function() {
        if(video.paused){
            video.play();
        }else{
            video.pause();
        }
    };

    const swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      } ,
      autoplay: {
        delay: 4000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      paginationElement : 'li',
      paginationClickable: true,
      loop: true,
      autoplayDisableOnInteraction: false
    });

    $("#no1").click(function() {
        document.getElementById("link1").scrollIntoView(true);
    });

    $("#no2").click(function() {
        document.getElementById("link2").scrollIntoView(true);
    });

    $("#no3").click(function() {
        document.getElementById("link3").scrollIntoView(true);
    });

    $('.order').on('click', function () {
        showAppointmentLayer();
    });
</script>
{/block}